<template>
  <div class="home" style="padding: 50px">
    <div style="text-align: left; padding-right: 10px; margin-bottom: 10px">
      <!-- 搜索和添加按钮 -->
      <el-input
          v-model="search"
          placeholder="请输入搜索关键字"
          style="width: 20%; margin-right: 10px"
          clearable
      ></el-input>
      <el-button type="primary" @click="load">搜索</el-button>
      <el-button type="info" @click="add">添加</el-button>
    </div>

    <!-- 学生信息表格 -->
    <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%; margin-bottom: 10px;"
    >
      <el-table-column prop="id" label="编号" width="180" sortable />
      <el-table-column prop="studentname" label="学生姓名" width="180" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="address" label="家庭地址" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <!-- 删除按钮 -->
          <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 学生信息对话框 -->
    <el-dialog v-model="dialogVisible" title="学生信息" width="50%"  :destroy-on-close="true">
      <el-form :model="form" label-width="120px" style="width: 80%;" :rules="rules">
        <el-form-item label="学生姓名" prop="studentname">
          <el-input v-model="form.studentname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio v-model="form.gender" label="男" size="large">男</el-radio>
          <el-radio v-model="form.gender" label="女" size="large">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input type="textarea" v-model="form.address" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import Validator from "async-validator";


export default {
  name: "HomeView",
  components: {},
  setup() {

    const rules= {
      studentname: [
        {required: true, message: '请输入学生姓名', trigger: 'blur'},
        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
      ],
      gender: [
        {required: true, message: '请选择性别', trigger: 'change'},
      ],
      age: [
        {required: true, message: '请输入年龄', trigger: 'blur'},
      ],
      address: [
        {required: true, message: '请输入家庭住址', trigger: 'blur'},
        {min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'blur'},
      ],
    }

    const state = reactive({
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      search: "",
      form: {},
      dialogVisible: false,
      rules : rules

    });


    // 加载学生数据
    const load = () => {
      axios
          .get("/api/students", {
            params: {
              pageNum: state.currentPage,
              pageSize: state.pageSize,
              search: state.search,
            },
          })
          .then((res) => {
            state.tableData = res.data.data.records;
            state.total = res.data.data.total;
          });
    };

    // 页面加载时加载数据
    onMounted(() => {
      load();
    });

    // 分页切换触发的方法
    const handleCurrentChange = (pageNum) => {
      state.currentPage = pageNum;
      load();
    };

    // 每页条数切换触发的方法
    const handleSizeChange = (pageSize) => {
      state.pageSize = pageSize;
      load();
    };

    // 添加学生信息
    const add = () => {
      state.dialogVisible = true;
      state.form = {};
    };

    const validator = new Validator(rules);

    // 保存学生信息
    const save = () => {
      validator.validate(state.form, (errors) => {
        if (errors) {
          console.error(errors);
          return;
        }

        // 校验通过，执行提交操作
        if (state.form.id) {
          axios.put("/api/students", state.form).then((res) => {
            if (res.data.code === "0") {
              ElMessage({
                message: "修改成功！",
                type: "success",
              });
            } else {
              ElMessage.error(res.msg);
            }
            load();
            state.dialogVisible = false;
          });
        } else {
          axios.post("/api/students", state.form).then((res) => {
            if (res.data.code === "0") {
              ElMessage({
                message: "添加成功！",
                type: "success",
              });
            } else {
              ElMessage.error(res.msg);
            }
            load();
            state.dialogVisible = false;
          });
        }
      });
    };

    // 编辑学生信息
    const handleEdit = (row) => {
      state.form = { ...row };
      state.dialogVisible = true;
    };

    // 删除学生信息
    const handleDelete = (id) => {
      axios.delete("/api/students/" + id).then((res) => {
        if (res.data.code === "0") {
          ElMessage({
            message: "删除成功！",
            type: "success",
          });
        } else {
          ElMessage.error(res.msg);
        }
        load();
        state.dialogVisible = false;
      });
    };

    return {
      ...toRefs(state),
      handleCurrentChange,
      handleSizeChange,
      add,
      save,
      handleEdit,
      handleDelete,
      load,
    };
  },
};
</script>